<!--
内容：发布职位
作者：黄彪
日期： 20170706
-->

<template>
    <div class="postJob">
        <Row>
            <Col span="8">
                <div class="ivu-form-item">
                    <label class="ivu-form-item-label">优先级<span class="necessary">*</span></label>
                    <div class="ivu-form-item-content">
                        <Radio-group v-model="phone">
                            <Radio label="apple">
                                <span>急聘职位</span>
                            </Radio>
                            <Radio label="android">
                                <span>正常招聘</span>
                            </Radio>
                        </Radio-group>
                    </div>
                </div>
            </Col>
            <Col span="8">
                <div class="ivu-form-item">
                    <label class="ivu-form-item-label">内部推荐</label>
                    <div class="ivu-form-item-content">
                        <Radio-group v-model="phone">
                            <Radio label="apple">
                                <span>内部推荐</span>
                            </Radio>
                            <Radio label="android">
                                <span>关闭</span>
                            </Radio>
                        </Radio-group>
                    </div>
                </div>
            </Col>
            <Col span="8">
                <div class="ivu-form-item">
                    <label class="ivu-form-item-label">推荐奖励</label>
                    <div class="ivu-form-item-content">
                        <div class="ivu-input-wrapper ivu-input-type">
                            <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                            <input type="text" placeholder="" class="ivu-input"></div>
                    </div>
                </div>
            </Col>
        </Row>

        <Row>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">用人部门<span class="necessary">*</span></label>
                <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                        <Select v-model="model1" style="width:200px">
                            <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
                        </Select>
                    </div>
                </div>
            </div>
            </Col>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">需求人数<span class="necessary">*</span></label>
                <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input type="text" placeholder="" class="ivu-input"></div>
                </div>
            </div>
            </Col>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">内部职位名<span class="necessary">*</span></label>
                <div class="ivu-form-item-content">
                    <Select v-model="model1" style="width:200px">
                        <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </div>
            </div>
            </Col>
        </Row>

        <Row>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">对外招聘名<span class="necessary">*</span></label>
                <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input type="text" placeholder="" class="ivu-input"></div>
                </div>
            </div>
            </Col>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">薪资<span class="necessary">*</span></label>
                <div class="ivu-form-item-content">
                    <Select v-model="model1" style="width:200px">
                        <Option v-for="(item, key) in salaryRange" :value="item.name" >{{ item.name }}</Option>
                    </Select>
                </div>
            </div>
            </Col>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">期望到岗</label>
                <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input type="text" placeholder="" class="ivu-input"></div>
                </div>
            </div>
            </Col>
        </Row>

        <Row>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">工作性质</label>
                <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input type="text" placeholder="" class="ivu-input"></div>
                </div>
            </div>
            </Col>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">工作年限</label>
                <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input type="text" placeholder="" class="ivu-input"></div>
                </div>
            </div>
            </Col>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">最低学历</label>
                <div class="ivu-form-item-content">
                    <Select v-model="model1" style="width:200px">
                        <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </div>
            </div>
            </Col>
        </Row>

        <Row>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">第二语言</label>
                <div class="ivu-form-item-content">
                    <div class="float_left width_50">
                        <Select v-model="model1" style="width:200px">
                            <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
                        </Select>
                    </div>
                    <div class="float_left width_50">
                        <Select v-model="model1" style="width:200px">
                            <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
                        </Select>
                    </div>
                    <div class="clear_both"></div>
                </div>
            </div>
            </Col>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">年龄</label>
                <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input type="text" placeholder="" class="ivu-input"></div>
                </div>
            </div>
            </Col>
            <Col span="8">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">性别</label>
                <div class="ivu-form-item-content">
                    <Radio-group v-model="phone">
                        <Radio label="apple">
                            <span>不限</span>
                        </Radio>
                        <Radio label="android">
                            <span>男</span>
                        </Radio>
                        <Radio label="android1">
                            <span>女</span>
                        </Radio>
                    </Radio-group>
                </div>
            </div>
            </Col>
        </Row>

        <Row>
            <Col span="24">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">福利</label>
                <div class="ivu-form-item-content">
                    <div class="float_left width_120px">
                        <Select v-model="model1" style="width:200px">
                            <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
                        </Select>
                    </div>
                    <div class="margin_left_120">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input type="text" placeholder="" class="ivu-input">
                    </div>
                </div>
            </div>
            </Col>
        </Row>

        <Row>
            <Col span="24">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">职位描述</label>
                <div class="ivu-form-item-content">
                    <quill-editor v-model="content"
                                      @blur="onEditorBlur($event)"
                                      @focus="onEditorFocus($event)"
                                      @ready="onEditorReady($event)"
                                      ref="myQuillEditor"
                                      :options="editorOption"></quill-editor>
                </div>
            </div>
            </Col>
        </Row>

        <Row>
            <Col span="24">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">招聘原因</label>
                <div class="ivu-form-item-content">
                    <Input v-model="value6" type="textarea" :rows="4" placeholder="请输入..."></Input>
                </div>
            </div>
            </Col>
        </Row>

        <Row>
            <Col span="24">
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">发布日期</label>
                <div class="ivu-form-item-content">
                    <Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
                </div>
            </div>
            </Col>
        </Row>

        <Row>
            <Col span="24" class="text_center">
                <Button type="primary margin_right_15">提交</Button>
                <Button type="primary margin_right_15">保存</Button>
                <Button type="primary margin_right_15">取消</Button>
            </Col>
        </Row>

    </div>
</template>

<script>
    //  富文本编辑器
    import {quillEditor } from 'vue-quill-editor'
    // 引用数据字典
    import {salaryRange} from "../src/config/dataDictionary"

    export default {
        components: {
            quillEditor
        },
        data: function() {
            return {
                formTop:{},
                // 富文本编辑器
                editorOption: {
                    // some quill options
                },
                content:"<h2>I am Example 1</h2>",
                model1:"beijing",
                // 多选配置
                phone:"apple",
                // 薪资范围
                salaryRange:salaryRange,
                // 下拉列表数据
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    },
                    {
                        value: 'shenzhen',
                        label: '深圳市'
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州市'
                    },
                    {
                        value: 'nanjing',
                        label: '南京市'
                    },
                    {
                        value: 'chongqing',
                        label: '重庆市'
                    }
                ]
            }
        },
        methods: {
            onEditorBlur(editor) {
                console.log('editor blur!', editor)
            },
            onEditorFocus(editor) {
                console.log('editor focus!', editor)
            },
            onEditorReady(editor) {
                console.log('editor ready!', editor)
            }
        },
        computed: {
            editor() {
                return this.$refs.myTextEditor.quill
            }
        }
    }
</script>

<style scoped lang="scss">
    .postJob{
        min-width: 900px;
        max-width: 1200px;

        .ivu-form-item{
            padding: 0 12px;
            .ivu-form-item-label{
                line-height: 28px;
            }
            .necessary{
                color: #EEB03B;
                margin-left: 3px;
                line-height: 14px;
                font-size: 14px;
            }
        }
    }

</style>
